<template>

    <div class="payment-batchtip">
        <div class="order-payment-close" @click="close()"><svg-icon name="dialog-close-medium" /></div>

        <img src="@/assets/images/payment/dialog-risk-icon.png" alt="">
        <h2>Got multiple orders? Make it easy with 'Bulk Pay'!</h2>

        <figure>
            <img src="@/assets/images/payment/dialog-risk-notify.gif" alt="">
        </figure>

        <UxCheckbox v-model="hidden">Don't show this again.</UxCheckbox>

        <fieldset>
            <button @click="onGotIt()">Got It</button>
            <button type="primary" @click="onBulk()">Bulk pay</button>
        </fieldset>

        <UxLoading2 :loading="loading" />

    </div>

</template>
<script>
export default {
    data () {
        return {
            loading: false,
            hidden: false,
        };
    },

    methods: {
        close () {
            this.$emit('close', null)
        },

        async onConfirm () {
            if (this.hidden) {
                this.loading = true;
                await this.$store.dispatch('user/updatePopupAccess', { name: 'payment_switching_batchtip', close: true })
                this.loading = false;
            } else {
            }
        },

        async onGotIt () {
            await this.onConfirm()
            this.close()
        },


        async onBulk () {
            await this.onConfirm()

            if (this.$route.name == 'order-confirm') {
                this.$router.push({ name: "user-order", params: { action: 'bulkpay' } });
            } else {
                this.$emit('global:ORDER_DETAIL_CLOSE');
                this.$emit('global:ORDER_BULK_OPEN');
            }

        }
    },

};
</script>
<style lang="scss" scoped>
.payment-batchtip {
    padding: 24px 24px 32px;
    width: 656px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .order-payment-close {
        z-index: 1;
        position: absolute;
        right: 4px;
        top: 4px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        transition: all 0.3s;
        cursor: pointer;
        border-radius: 4px;
        svg {
            width: 10px;
            height: 10px;
        }
        &:hover {
            background-color: rgba(255, 0, 0, 0.1);
            color: #8c1c14;
        }
    }

    & > img {
        width: 38px;
        height: 38px;
        margin: 0 auto;
        border-radius: 36px;
    }

    & > h2 {
        margin-top: 16px;
        font-size: 14px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 20px;
        text-align: center;
    }

    & > figure {
        margin-top: 16px;
        position: relative;
        overflow: hidden;
        background: #f2f2eb;
        border-radius: 8px;
        border: 1px solid #f0f0e9;
        & > img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        &::before {
            content: '';
            display: block;
            padding-bottom: 51.316%;
        }
    }
    & > .form-checkbox {
        margin-top: 16px;
        font-size: 14px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 16px;
    }

    & > fieldset {
        display: flex;
        margin-top: 34px;
        justify-content: center;

        button {
            width: 130px;
            height: 36px;
            margin: 0 5px;
        }
    }
}
</style>
